<template>
  <div class="tpl-page page">
    <load-data-wrapper :status="status" class="tpl-list">
      <div class="file-wrapper">
        <c-file
          v-for="v in grounps"
          :key="v.pkid"
          :folder="v"
          :title="v.devgroupname"
          :files="v.list"
          :active-id="curTplId"
          @folderAction="folderAction"
          @fileAction="fileAction"
          @selectTpl="selectTpl"
        />
        <right-click :items="foldItems" style="flex: 1; min-height: 20px;" @action="editGrounp()" />
        <c-dialog
          v-if="dlgType === 'addTpl'"
          :title="(newTpl.devtempid ? '编辑' : '添加') + '模版'"
          @close="dlgType = ''"
        >
          <div class="add-tpl">
            <div class="row">
              <span class="label">模版名称:</span>
              <el-input v-model="newTpl.devtempname" size="mini" placeholder="请输入名称" />
            </div>
            <!-- <div class="row">
            <span class="label">模版描述:</span>
            <el-input v-model="newTpl.devtempdesc" type="textarea" size="mini" placeholder="请输入" />
          </div>
          <div class="row">
            <span class="label">模版类型:</span>
            <el-select v-model="newTpl.devtemptypeid" size="mini" placeholder="请选择">
              <el-option label="无接口1" :value="1"></el-option>
              <el-option label="无接口2" :value="2"></el-option>
            </el-select>
            </div>-->
            <div class="row func">
              <el-button size="small" @click="editTpl">确定</el-button>
              <el-button size="small" @click="dlgType = ''">取消</el-button>
            </div>
          </div>
        </c-dialog>
      </div>
    </load-data-wrapper>
    <dev-children :tpl-id="curTplId" :name="curTplName" />
  </div>
</template>

<script>
import CFile from "./components/CFile";
import CDialog from "@/components/CDlg";
import RightClick from "@/components/RightClick";
import DevChildren from "./components/DevChildren";
import { clone } from "lodash";
import LoadDataWrapper from "@/components/base/LoadDataWrapper";
export default {
  name: "Template",
  components: {
    CFile,
    CDialog,
    RightClick,
    DevChildren,
    LoadDataWrapper
  },
  data() {
    return {
      grounps: null,
      tableData: null,
      dlgType: "",
      foldItems: [
        {
          id: 1,
          template: `<i class="el-icon-circle-plus-outline icon" />
          <span>添加组</span>`,
          name: "添加组",
          action: "add"
        }
      ],
      newTpl: {},
      curTplId: null,
      // curTplName: null,
      // temp
      sbType: "",
      value: "",
      loading: false,
      status: "loading"
    };
  },
  computed: {
    curTplName() {
      let name = null;
      this.grounps &&
        this.grounps.forEach(g => {
          g.list &&
            g.list.forEach(t => {
              if (t.devtempid === this.curTplId) {
                name = t.devtempname;
                return;
              }
            });
        });
      return name;
    }
  },
  async created() {
    this._getDevGroups();
    this.curTplId = parseInt(this.$route.query.id) || null;
  },
  // async updated() {
  //   await this._getDevGroups();
  //   this.curTplId = parseInt(this.$route.params.id) || null;
  // },
  methods: {
    _getDevGroups() {
      // const post = {};
      // const load = this.$loading();
      return this.$axios
        .get("fes/device/threeDevgroup")
        .then(res => {
          if (res.code === 1) {
            const data = res.data;
            if (data instanceof Array && data.length > 0) {
              !this.curTplId &&
                data &&
                data[0] &&
                data[0].list &&
                data[0].list[0] &&
                (this.curTplId = data[0].list[0].devtempid);
              this.grounps = res.data;
              this.status = "load";
            } else {
              this.status = "empty";
            }
          } else {
            throw res.msg;
          }
        })
        .catch(e => {
          this.status = "error";
        });
    },
    selectTpl(v) {
      this.$router.replace("/front/template?id=" + v.devtempid);
      this.curTplId = v.devtempid;
      // this.curTplName = v.devtempname;
    },
    fileAction(p) {
      switch (p.action) {
        case "edit":
          this.newTpl = clone(p);
          // this.dlgType = "addTpl";
          this.editTpl(p);
          break;
        case "add":
          break;
        case "delete":
          // this.deleteTpl(p);
          break;
      }
    },
    folderAction(p) {
      switch (p.action) {
        case "add":
          // this.dlgType = "addTpl";
          this.editTpl({ devgroupid: p.pkid });
          break;
        case "edit":
          this.editGrounp(p);
          break;
        case "delete":
          // this.deleteGrounp(p.pkid);
          break;
        default:
      }
    },
    // editTpl(p) {
    //   this.$prompt("请输入模版名字", "编辑模版", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消"
    //   }).then(({ value }) => {
    //     if (!value) return;
    //     const post = {
    //       devtempname: value
    //     };
    //     folder && (post.pkid = folder.pkid);
    //     this.$axios
    //       .post("device/devgroupEdit", post)
    //       .then(res => {
    //         if (res.code === 1) {
    //           this._getDevGroups();
    //         } else {
    //           throw res.msg;
    //         }
    //       })
    //       .catch(e => {
    //         this.$message.error(e);
    //       });
    //   });
    // },
    editGrounp(folder) {
      this.$prompt("请输入设备组名字", "编辑设备组", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: folder && folder.devgroupname
      }).then(({ value }) => {
        if (folder && value === folder.devgroupname) return;
        const post = {
          devgroupname: value
        };
        folder && (post.pkid = folder.pkid);
        this.$axios
          .post("fes/device/devgroupEdit", post)
          .then(res => {
            if (res.code === 1) {
              this._getDevGroups();
            } else {
              throw res.msg;
            }
          })
          .catch(e => {
            this.$message.error(e);
          });
      });
    },
    // deleteGrounp(id) {
    //   this.$confirm("此操作将永久删除该设备组及其设备模版, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(() => {
    //     this.$axios
    //       .post("device/devgroupRemove", { pkid: id })
    //       .then(res => {
    //         if (res.code === 1) {
    //           this.grounps = this.grounps.filter(g => g.pkid !== id);
    //         } else {
    //           throw res.msg;
    //         }
    //       })
    //       .catch(e => this.$message.error(e));
    //   });
    // },
    editTpl(t) {
      this.$prompt("请输入模版名字", "编辑模版", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: t && t.devtempname
      }).then(({ value }) => {
        if (!value) return;
        t.devtempname = value;
        this.$axios
          .post("fes/device/devTempEdit", t)
          .then(res => {
            if (res.code === 1) {
              this._getDevGroups();
            } else {
              throw res.msg;
            }
          })
          .catch(e => {
            this.$message.error(e);
          });
      });
    }
    // deleteTpl(tpl) {
    //   this.$confirm("此操作将永久删除该模版, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   }).then(() => {
    //     this.$axios
    //       .post("/device/removeDev", { devtempid: tpl.devtempid })
    //       .then(res => {
    //         if (res.code === 1) {
    //           this.$axios;
    //         } else {
    //           throw res.msg;
    //         }
    //       })
    //       .catch(e => this.$message.error(e));
    //   });
    // }
  }
};
</script>

<style lang="scss" scoped>
.tpl-page {
  height: 100%;
}
.tpl-list {
  position: absolute;
  width: 275px;
  height: 100%;
  overflow-y: auto;
  background: #222c3c;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #7c8ca5;
  display: flex;
  flex-direction: column;
  >>> .file-wrapper {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  >>> .el-loading-mask {
    background: rgba($color: #000000, $alpha: 0);
  }
}

.add-tpl {
  padding: 20px;
}
.add-sb-c {
  padding: 20px;
  label {
    margin-right: 30px;
  }
  >>> .el-radio {
    .el-radio__label {
      color: #eee;
    }
  }
}
>>> .func {
  display: flex;
  justify-content: space-around;
}
</style>
